<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
    <link rel="stylesheet" href="./animate.css">
</head>
<style>
</style>

<body>
    <div id="app">
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"
            v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled">
            <div v-if="isShow">itcast</div>
        </transition>

        <button @click="isShow=!isShow">点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                beforeEnter(el) {
                    console.log('beforeEnter');
                    el.style.paddingLeft = "100px";
                },
                enter(el, done) {
                    console.log('enter');
                    var step = 1;
                    var interval = setInterval(() => {
                        el.style.paddingLeft = (100 - step) + "px";
                        step++;
                        if (step === 100) {
                            clearInterval(interval);
                            done();
                        };
                        console.log(step, 666);
                    }, 5);
                },
                afterEnter(el) {
                    console.log('afterEnter');
                    el.style.paddingLeft = "0px";
                },
                enterCancelled(el) {
                    console.log('enterCancelled');
                },
                beforeLeave(el) {
                    console.log('beforeLeave');
                    el.style.paddingLeft = "100px";
                },
                leave(el, done) {
                    console.log('leave');
                    var step = 100;
                    var interval2 = setInterval(() => {
                        step--;
                        el.style.paddingLeft = (100 - step) + "px";
                        console.log(step, 9999);
                        if (step <= 1) {
                            clearInterval(interval2);
                            done();
                        };
                    }, 5);
                },
                afterLeave(el) {
                    console.log('afterLeave');
                    el.style.paddingLeft = "100px";
                },
                leaveCancelled(el) {
                    console.log('leaveCancelled');
                },
            }
        })
    </script>
</body>

</html>